<template>
  <div class="content-box">
    <div class="container">
      <span>&nbsp;&nbsp;&nbsp;&nbsp;项目名称：</span>
      <el-input
        v-model="queryList.projectName"
        placeholder="请输入项目名称"
        style="width: 200px"
        size="mini"
      ></el-input>
      <span style="margin-left: 20px">预计开工：</span>
      <el-date-picker
        v-model="useless.startTime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        size="mini"
      >
      </el-date-picker>
      <span style="margin-left: 20px">立项日期：</span>
      <el-date-picker
        v-model="useless.setupTime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        size="mini"
      >
      </el-date-picker>
      <span style="margin-left: 20px">项目经理：</span>
      <el-select
        v-model="queryList.projectManagerId"
        clearable
        placeholder="请选择项目经理"
      >
        <el-option
          v-for="item in user"
          :key="item.id"
          :label="item.userName"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <br />
      <span style="margin-top: 10px">立项负责人：</span>
      <el-select
        v-model="queryList.inCharge"
        clearable
        placeholder="请选择立项负责人"
        ><el-option
          v-for="item in user"
          :key="item.id"
          :label="item.userName"
          :value="item.id"
        >
        </el-option
      ></el-select>
      <el-button @click="queryProjectApproval()" size="mini">查询</el-button>
      <el-button size="mini" @click="resetting()">重置</el-button>
    </div>
    <div class="container">
      <div>
        <el-button @click="add()">新增</el-button>
        <el-button @click="isExport()">导出</el-button>
      </div>
      <div class="table-container">
        <el-table
          :data="tableData"
          v-adaptive="{ bottomOffset: 85 }"
          border
          height="500"
          style="width: 100%; font-size: 12px; margin-top: 10px"
          :cell-style="cellStyle"
          :header-cell-style="rowClass"
          :show-overflow-tooltip="true"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center"></el-table-column
          ><el-table-column
            type="id"
            label="序号"
            align="center"
            width="50"
            fixed="left"
            prop="id"
          ></el-table-column
          ><el-table-column
            label="立项记录编号"
            align="center"
            fixed="left"
            width="200"
            prop="number"
          ></el-table-column
          ><el-table-column
            label="项目名称"
            align="center"
            width="150"
            prop="name"
          ></el-table-column
          ><el-table-column
            label="预计开工日期"
            align="center"
            width="150"
            prop="expectedCommencementDate"
          ></el-table-column
          ><el-table-column
            label="预计完工日期"
            align="center"
            width="150"
            prop="estimatedCompletionDate"
          ></el-table-column
          ><el-table-column
            label="预计总工期(天)"
            align="center"
            width="150"
            prop="totalConstructionPeriod"
          ></el-table-column
          ><el-table-column
            label="项目经理"
            align="center"
            prop="sysUserName"
          ></el-table-column
          ><el-table-column
            label="立项负责人"
            align="center"
            width="150"
            prop="inChargeName"
          ></el-table-column>
          <el-table-column
            label="立项日期"
            align="center"
            width="150"
            prop="projectApprovalDate"
          ></el-table-column>
          <el-table-column
            label="项目状态"
            align="center"
            prop="projectStatus"
            :formatter="projectState"
          ></el-table-column>
          <el-table-column
            label="流程状态"
            align="center"
            prop="state"
            :formatter="state"
          ></el-table-column>
          <el-table-column
            label="最近更新时间"
            align="center"
            prop="updateTime"
            width="250"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="250"
          >
            <template slot-scope="scope">
              <el-button size="mini">查看</el-button>
              <el-button size="mini" @click="update(scope.row)">编辑</el-button>
              <el-button size="mini">提交</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-area">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryList.pageNum"
          :page-sizes="[10, 15, 20, 30, 50]"
          :page-size="queryList.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import request from "@/util/request";
const useless = {
  //选项
  startTime: [], //开工时间
  setupTime: [], //立项时间
};
const pickerOptions = {
  //时间选择器快捷选项
  shortcuts: [
    {
      text: "最近一周",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit("pick", [start, end]);
      },
    },
    {
      text: "最近一个月",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        picker.$emit("pick", [start, end]);
      },
    },
    {
      text: "最近三个月",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        picker.$emit("pick", [start, end]);
      },
    },
  ],
};
const defaultQueryList = {
  // 查询条件
  pageNum: 1, // 当前页
  pageSize: 10, // 每页条数
  projectName: "", // 项目名称
  startTime: "", // 预计开工时间 开始
  endTime: "", // 预计开工时间 结束
  setupStartTime: "", // 立项时间 开始
  setupEndTime: "", // 立项时间 结束
  projectManagerId: "", // 项目经理
  inCharge: "", // 立项负责人
};
export default {
  name: "projectApproval",
  data() {
    return {
      queryList: Object.assign({}, defaultQueryList), // 查询条件
      tableData: [], //表格数据
      total: 0, // 总条数
      pickerOptions: Object.assign({}, pickerOptions), //时间选择器快捷选项
      useless: Object.assign({}, useless), //选项
      user: [], //用户列表
      selectedList: [], //批量选择行数
      config: {}, //配置
    };
  },
  watch: {
    //监听
    "useless.startTime": function (val) {
      //开工时间
      if (val != null && val.length > 0) {
        this.queryList.startTime = val[0];
        this.queryList.endTime = val[1];
        console.log(this.queryList.startTime);
      } else {
        this.queryList.startTime = "";
        this.queryList.endTime = "";
      }
    },
    "useless.setupTime": function (val) {
      //立项时间
      if (val != null && val.length > 0) {
        this.queryList.setupStartTime = val[0];
        this.queryList.setupStartTime = val[1];
      } else {
        this.queryList.setupTime = "";
        this.queryList.setupStartTime = "";
      }
    },
  },
  mounted() {
    this.findProjectApproval();
    this.shezhi();
  },
  methods: {
    resetting() {
      this.queryList = Object.assign({}, defaultQueryList);
      this.findProjectApproval();
    },
    shezhi() {
      //设置请求头
      const user = window.sessionStorage.getItem("user");
      const token = user ? JSON.parse(user).token : null;
      let config = {
        Headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", //
          // 设置请求头
          Authorization: token,
        },
      };
      this.config = config;
    },
    isExport() {
      //导出
      //导出
      let config = {
        responseType: "blob",
        //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
        Headers: {
          "Content-Type": "application/x-msdownload;charset=utf-8", //
        },
      };
      axios.get("/project-approval/export", config).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8", //
        });
        let url = window.URL.createObjectURL(blob);
        const link = document.createElement("a"); // 创建a标签
        link.href = url;
        link.download = "施工立项报表.xlsx";
        link.click();
        URL.revokeObjectURL(url); // 释放内存
      });
    },
    update(row) {
      //编辑
      this.$router.push({
        name: "projectApprovalAU",
        params: {
          type: "update",
          row: row,
        },
      });
    },
    add() {
      //新增
      this.$router.push({
        name: "projectApprovalAU",
        params: {
          type: "add",
        },
      });
    },
    queryProjectApproval() {
      //模糊查询
      let t = new FormData();
      t.append("pageNum", this.queryList.pageNum);
      t.append("pageSize", this.queryList.pageSize);
      t.append("projectName", this.queryList.projectName);
      t.append("startTime", this.queryList.startTime);
      t.append("endTime", this.queryList.endTime);
      t.append("setupStartTime", this.queryList.setupStartTime);
      t.append("setupEndTime", this.queryList.setupEndTime);
      t.append("projectManagerId", this.queryList.projectManagerId);
      t.append("inCharge", this.queryList.inCharge);
      axios.post("/project-approval/page", t, this.config).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.content;
          this.total = res.data.data.totalSize;
        } else if (res.data.code == 500) {
          if (res.data.data.errCode == 20011) {
            this.$message.error(res.data.data.errMsg);
            this.$router.push("/login");
          } else {
            this.$message.error(res.data.data.errMsg);
          }
        } else {
          this.$message.error(res.data.data.errMsg);
        }
      });
    },
    findProjectApproval() {
      request.post("/project-approval/page").then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.content;
          this.total = res.data.totalSize;
        } else if (res.code == 500) {
          if (res.data.errCode == 20011) {
            this.$message.error(res.data.errMsg);
            this.$router.push("/login");
          } else {
            this.$message.error(res.data.errMsg);
          }
        } else {
          this.$message.error(res.data.errMsg);
        }
      });
    },
    state(row) {
      //审核状态 0待提交 1已提交 2已通过 3未通过
      if (row.state == 0) {
        return "待提交";
      } else if (row.state == 1) {
        return "已提交";
      } else if (row.state == 2) {
        return "已通过";
      } else if (row.state == 3) {
        return "未通过";
      }
    },
    projectState(row) {
      //项目状态  1待立项  2已立项  3 投标中  4 已落标 5 已中标    6待施工  7施工中   8已竣工   9已关闭
      if (row.projectStatus == 1) {
        return "待立项";
      } else if (row.projectStatus == 2) {
        return "已立项";
      } else if (row.projectStatus == 3) {
        return "投标中";
      } else if (row.projectStatus == 4) {
        return "已落标";
      } else if (row.projectStatus == 5) {
        return "已中标";
      } else if (row.projectStatus == 6) {
        return "待施工";
      } else if (row.projectStatus == 7) {
        return "施工中";
      } else if (row.projectStatus == 8) {
        return "已竣工";
      } else if (row.projectStatus == 9) {
        return "已关闭";
      }
    },
    handleSizeChange(pageSize) {
      //每页显示条数
      this.queryList.pageSize = pageSize;
      this.queryProjectApproval();
    },
    handleCurrentChange(pageNum) {
      //当前页
      this.queryList.pageNum = pageNum;
      this.queryProjectApproval();
    },
    handleSelectionChange(val) {
      // 批量选择行数
      this.selectedList = val;
    },
    cellStyle() {
      //表格行居中
      return "text-align:center";
    },
    rowClass() {
      //表格列居中
      return "text-align:center";
    },
  },
};
</script>

<style>
</style>